<!--
 * @Description: 
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-08-17 08:49:41
 * @LastEditors: zhou
 * @LastEditTime: 2022-08-30 16:30:36
-->
<template>
    <div class="page flexrbc">
        <div class="previous pointer" :class="[first==0? 'is_limit':'']" @click="changePage(-1)">上一页</div>
        <div class="page_num">第{{cut_page}} / {{pages}}页 (共{{total}}条)</div>
        <div class="next pointer" :class="[last==0? 'is_limit':'']" @click="changePage(1)">下一页</div>
    </div>
</template>

<script>

export default {
    name: "ProPage",
    components: {  },
    props: {
        // 总条数
        total: {
            type: [Number, Array],
            default: 1
        },
        // 总页数
        pages: {
            type: [Number, String],
            default: 1
        },
        
    },
    data() {
        return {
            cut_id: 0,
            cut_page: 1,   // 当前页
            first: 1,   // 0 不能点,1可点
            last: 1
        };
    },
    computed: {},
    watch: {
        cut_page: {
            handler(n, o) {
                if(n <= 1) { this.first = 0 }
                else { this.first = 1 }
                if(n>=this.pages) {this.last = 0;}
                else {this.last = 1}
            },
            deep: false,
            immediate: true
        },
        pages: {
            handler(n, o) {
                if(n<=this.cut_page) {this.last = 0;}
                else {this.last = 1}
            },
        },
    },
    created() {},
    mounted() {
    },
    methods: {
        changePage(num) {
            if(num==-1 && this.cut_page <= 1) {}
            else if(num==1 && this.cut_page >= this.pages) {}
            else { 
                this.cut_page = this.cut_page + num
                this.$emit('on_page', this.cut_page)
            }
            
        },
        // 重置 页码
        resetPage() {
            this.cut_page = 1
        }
    },
    
};
</script>
<style lang="scss" scoped>
.page {
    height: vh(48);
    background: rgba(8, 57, 87, 0.3);
    color: #ffffff;
    padding: 0 vw(16);
    .is_limit {
        color:rgba(255,255,255, 0.4)
    }
}
</style>
